<template>
    <!-- 能源组合策略评估 -->
    <div>
        <top />

        <div class="strategy" @click="closePort">
            <div class="box">
                <el-table :data="dataList" element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.6)" v-loading="showLoading" cell-class-name="cellClass"
                    max-height="510" border header-row-class-name="headClass" stripe
                    style="background-color: #172C69; border: 2px solid #2D57D2;">
                    <el-table-column type="index" align="center" label="序号" width="193">
                    </el-table-column>
                    <el-table-column prop="type" align="center" label="区域类型" width="auto">
                    </el-table-column>
                    <el-table-column prop="length" align="center" label="长度" width="auto">
                    </el-table-column>
                    <el-table-column prop="width" align="center" label="宽度" width="auto">
                    </el-table-column>
                    <el-table-column prop="have" align="center" label="方圆2km内是否有高建筑物" width="auto">
                    </el-table-column>
                    <el-table-column prop="whetherHasFan" align="center" label="安装设备" width="auto">
                        <template slot-scope="scope">
                            {{ scope.row.whetherHasFan == 0 ? "光伏组件" : "光伏组件/风机" }}
                            <div>风机台数：{{ fanList[scope.$index].fanNumber ? fanList[scope.$index].fanNumber : 0 }}</div>
                            <div>光伏组件面积：{{ fanList[scope.$index].photovoltaicPanelsArea }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="tools flex">
            <div class="btn">保存</div>
            <div class="btn">取消</div>
        </div> -->
            </div>

            <div class="top-bar">
                <div class="title flex-al-center">选择优先输出参数：
                    <div class="input pointer flex-al-center" @click.stop="openPort">
                        <input type="text" v-model="condition" disabled style="width:310px" placeholder="下拉选择优先参数">
                        <div class="result" v-if="showPort">
                            <div class="r-li pointer" v-for="(item, index) in conditionList" :key="index"
                                @click="getCondition(item, index)">
                                {{ item }}
                            </div>
                        </div>
                        <img class="pointer" :class="{ transform: showPort }" src="@/assets/arrow-down.png" alt="">
                    </div>
                </div>
                <div class="search-box flex-al-center flex-bet">
                    <div class="">
                        <div class="s-title">发电量/MW h</div>
                        <div class="input pointer">
                            <input type="text" v-model="resultForm.powerGeneration" disabled>
                        </div>
                    </div>
                    <div>
                        <div class="s-title">经济性</div>
                        <div class="input pointer">
                            <input type="text" v-model="resultForm.economic" disabled>
                        </div>
                    </div>
                    <div>
                        <div class="s-title">碳排放</div>
                        <div class="input pointer">
                            <input type="text" v-model="resultForm.carbonEmissions" disabled>
                        </div>
                    </div>
                    <!-- <div>
                        <div class="s-title">能源利用效率</div>
                        <div class="input pointer">
                            <input type="text" v-model="resultForm.energyUtilizationEfficiency" disabled>
                        </div>
                    </div> -->
                </div>

                <div class="tools flex">
                    <div class="btn" @click="goBack">返回</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import top from "@/components/top.vue"
export default {
    components: {
        top
    },
    data() {
        return {
            showPort: false,
            port: "",
            fanList: [],
            coverArea: "",
            showLoading: "",
            resultForm: {
                powerGeneration: '',
                energyUtilizationEfficiency: '',
                economic: '',
                carbonEmissions: '',
            },
            dataList: [
            ],
            condition: "",
            conditionList: ["发电量", "经济性", "碳排放"],
            portList: ["阳逻港", "青岛港", "天津港", "宁波舟山港"],
        }
    },
    created() {
        console.log(this.dList, this.wind, this.light) 
        this.dList && (this.dataList = this.dList)

        var dataBody = {
            windPowerCalculationVO: Object.keys(this.wind).length > 1 ? this.wind : { ...this.defaultList2[3], useFixedNumberOfYear: this.maxYears },
            photovoltaicCalculationVO: Object.keys(this.light).length > 1 ? { ...this.light, photoelectricConversionEfficiency: this.light.photoelectricConversionEfficiency * 0.01 } : { ...this.defaultList[3], photoelectricConversionEfficiency: this.defaultList[3].photoelectricConversionEfficiency * 0.01, serviceLife: this.maxYears },
            policyInfoList: this.dList,
            priorityParameters: this.types + 1
        }
        this.showLoading = true
        this.$api.calcOptimalSolution(dataBody).then(res => {
            this.showLoading = false
            if (res.code === 200) {
                console.log(res)
                this.resultForm = res.data
                this.fanList = Object.values(res.data.map).reverse()
            }
        })
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        // 隐藏列表
        closePort() {
            this.showPort = false;
        },
        openPort() {
            this.showPort = !this.showPort;
        },
        getCondition(item, index) {
            this.condition = item
            var dataBody = {
                windPowerCalculationVO: Object.keys(this.wind).length > 1 ? this.wind : { ...this.defaultList2[3], useFixedNumberOfYear: this.maxYears },
                photovoltaicCalculationVO: Object.keys(this.light).length > 1 ? { ...this.light, photoelectricConversionEfficiency: this.light.photoelectricConversionEfficiency * 0.01 } : { ...this.defaultList[3], photoelectricConversionEfficiency: this.defaultList[3].photoelectricConversionEfficiency * 0.01, serviceLife: this.maxYears },
                policyInfoList: this.dList,
                priorityParameters: index + 1
            }
            this.showLoading = true

            this.$api.calcOptimalSolution(dataBody).then(res => {
                this.showLoading = false

                console.log(res)
                this.resultForm = res.data
                this.fanList = Object.values(res.data.map).reverse()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.strategy {
    background-color: #000C38;
    height: 90.7vh;
    box-sizing: border-box;
    overflow: auto;
    padding: 27px;
}

.box {
    background: #172C69;
    border-radius: 5px 5px 5px 5px;
    padding: 32px 35px;
}

.top-bar {
    margin: 27px 0 0 0;
    padding: 27px;
    background: #172C69;
    border-radius: 5px;
    margin-bottom: 27px;

    .title {
        font-size: 27px;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0 0 21px 0;

        .input {
            position: relative;
            border-radius: 5px;
            border: 3px solid #2D57D2;
            padding: 11px 11px 11px 16px;
            border-radius: 5px;

            .result {
                padding: 11px;
                position: absolute;
                z-index: 100;
                left: -3px;
                right: -3px;
                top: 56px;
                background: #2D57D2;
                box-shadow: 0px 3px 8px 0px rgba(0, 12, 56, 0.75);
                border-radius: 5px 5px 5px 5px;

                .r-li {
                    padding: 3px 11px;
                    margin: 0 0 8px 0;
                    font-size: 21px;
                    border-radius: 5px;

                    &:last-of-type {
                        margin: 0;
                    }

                    &:hover {
                        background: #173CA8;
                    }
                }
            }

            input {
                font-size: 21px;
                color: #FFFFFF;
                background-color: transparent;
            }

            img {}
        }
    }

    .search-box {
        .s-title {
            font-size: 27px;
            color: #E9EBF1;
            margin: 0 0 10px 0;
        }

        .input {
            position: relative;
            border-radius: 5px;
            border: 3px solid #2D57D2;
            padding: 11px 11px 11px 16px;
            margin: 0 37px 0 0;
            border-radius: 5px;

            .result {
                padding: 11px;
                position: absolute;
                z-index: 10;
                left: -3px;
                right: -3px;
                top: 56px;
                background: #2D57D2;
                box-shadow: 0px 3px 8px 0px rgba(0, 12, 56, 0.75);
                border-radius: 5px 5px 5px 5px;

                .r-li {
                    padding: 3px 11px;
                    margin: 0 0 8px 0;
                    font-size: 21px;
                    border-radius: 5px;

                    &:last-of-type {
                        margin: 0;
                    }

                    &:hover {
                        background: #173CA8;
                    }
                }
            }

            input {
                font-size: 21px;
                color: #FFFFFF;
                background-color: transparent;
                width: 310px;
            }
        }

        .btn {
            padding: 9.5px 37px 9px;
            background: #2D57D2;
            border-top: 3px solid #2D57D2;
            border-bottom: 3px solid #2D57D2;
            border-radius: 5px;
            font-size: 24px;
            line-height: 28px;
            color: #E9EBF1;
        }

        .border-r {
            border-radius: 5px;

        }
    }

}

.tools {
    justify-content: flex-end;
    margin: 20px 0 0 0;

    .btn {
        padding: 9.5px 47px 9px;
        background: #2D57D2;
        border-top: 3px solid #2D57D2;
        border-bottom: 3px solid #2D57D2;
        border-radius: 5px;
        font-size: 24px;
        line-height: 28px;
        color: #E9EBF1;
        margin-left: 20px;



    }
}
</style>
  